<template>
  <div class="activationcode">
	  <el-form  label-width="80px">
	    <el-form-item label="名称:">
	      <el-input v-model="name"></el-input>
	    </el-form-item>
	    <el-form-item label="开始时间:">
	     <el-date-picker
	          v-model="first_time"
	          type="datetime"
	          placeholder="选择日期时间"
	          align="right"
	          >
	        </el-date-picker>
	    </el-form-item>
	    <el-form-item label="结束时间:">
	       <el-date-picker
	            v-model="last_time"
	            type="datetime"
	            placeholder="选择日期时间"
	            align="right"
	        >
	          </el-date-picker>
	    </el-form-item>
	  </el-form>
	  
	  <el-button type="primary" @click="search()" style="margin-left: 15px;">查询</el-button>
	  
	   <el-table
	     border 
	     class="table" 
	     :fit="true" 
	     :data="tableData">
	     <el-table-column sortable label="编号">
	       <template slot-scope="{ row, $index }">
	         <span v-if="!showEdit[$index]">{{ row.exchange_id }}</span>
	         <el-input
	           type="text"
	           v-model="row.exchange_id"
	           v-else
	           placeholder="请输入编号"
	         ></el-input>
	       </template>
	     </el-table-column>
	     <el-table-column prop="product_id" sortable label="物品id">
	     </el-table-column>
	     <el-table-column sortable label="使用次数">
	       <template slot-scope="{ row, $index }">
	         <span v-if="!showEdit[$index]">{{ row.count }}</span>
	         <el-input
	           type="text"
	           v-model="row.count"
	           v-else
	           placeholder="请输入使用次数"
	         ></el-input>
	       </template>
	     </el-table-column>
	     <el-table-column sortable label="生效开始时间">
	       <template slot-scope="{ row, $index }">
	         <span v-if="!showEdit[$index]">{{
	           row.commencementime
	         }}</span>
	         <el-date-picker
	           type="datetime"
	           value-format="yyyy-MM-dd HH:mm:ss"
	           v-model="row.commencementime"
	           v-else
	           placeholder="请输入生效开始时间"
	         >
	         </el-date-picker>
	       </template>
	     </el-table-column>
	     <el-table-column sortable label="失效结束时间">
	       <template slot-scope="{ row, $index }">
	         <span v-if="!showEdit[$index]">{{
	           row.failureendtime
	         }}</span>
	         <el-date-picker
	           type="datetime"
	           value-format="yyyy-MM-dd HH:mm:ss"
	           v-model="row.failureendtime"
	           v-else
	           placeholder="请输入失效结束时间"
	         >
	         </el-date-picker>
	       </template>
	     </el-table-column>
	     <el-table-column
	       header-align="center"
	       align="center"
	       width="200"
	       label="操作"
	     >
	       <template slot-scope="{ row, $index }">
	         <el-button
	           v-if="!showEdit[$index]"
	           @click="showUpdate($index, row)"
	           type="primary"
	         >
	           <i class="el-icon-edit"></i>修改
	         </el-button>
	         <el-button
	           v-if="!showEdit[$index]"
	           @click="del($index, row)"
	           type="danger"
	         >
	           <i class="el-icon-delete"></i>删除
	         </el-button>
	         <el-button
	           v-if="showEdit[$index]"
	           @click="submit($index, row)"
	           type="success"
	           >确定</el-button
	         >
	         <el-button
	           v-if="showEdit[$index]"
	           @click="cancelUpdate($index)"
	           type="warning"
	           >取消</el-button
	         >
	       </template>
	     </el-table-column>
	   </el-table>
  </div>
</template>
<script>

export default {
  name: "FeeRolePh",
  data() {
    return {
      name: "",
      first_time: "",
      last_time: "",
      loading: false,
      //控制修改显示隐藏
      showEdit: [],
      tableData: [
        {
          exchange_id: "10014",
          product_id: "503",
          count: 18,
          commencementime: "2020-12-03 8:30:56",
          failureendtime: "2020-12-03 18:30:56",
        },
        {
          exchange_id: "72926",
          product_id: "1001",
          count: 18,
          commencementime: "2020-12-03 16:30:56",
          failureendtime: "2020-12-03 20:30:56",
        },
      ],
    };
  },
  mounted() {
    this.first_time = window.localStorage.getItem("first_time");
    this.last_time = window.localStorage.getItem("last_time");
  },
  methods: {
    //搜索
    search() {
      console.log(this.name,this.last_time,this.first_time)
    },
    //编辑后点击确定按钮
    submit(index, row) {
      console.log(index, row);
      this.$set(this.showEdit, index, false);
    },
    //点击删除
    del(index, row) {
      console.log(index, row);
    },
    //点击修改
    showUpdate(index) {
      this.showEdit[index] = true;
      //点击修改后改变状态切换为确定按钮
      this.$set(this.showEdit, index, true); //这里要用$set方法，否则页面状态不更新
    },
    //取消修改
    cancelUpdate(index) {
      this.$confirm("取消修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$set(this.showEdit, index, false);
        })
        .catch(() => {});
    },
    //导出csv
    ExportCsv(){
       console.log(1111)
    }
  },
};
</script>
<style scoped>
.activationcode .el-form {
  display: flex;
  float: left;
}

</style>